<template>
  <el-form inline label-width="auto" size="medium" class="search-form">
    <el-form-item label="订单号">
      <el-input v-model="search.orderNoMain" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="购买者">
      <el-input v-model="search.buyerName" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="联系方式">
      <el-input v-model="search.buyerPhone" class="search-input"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select clearable v-model="search.status" class="search-input">
        <el-option v-for="item in statusList" :key="item.value" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="下单时间">
      <el-date-picker clearable v-model="search.startTime" class="time-input" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss"
        :editable="false">
      </el-date-picker>
      <span>-</span>
      <el-date-picker clearable v-model="search.endTime" class="time-input" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss"
        :editable="false">
      </el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
  import PermissionApi from 'services/permissionApi';

  export default {
    props: {
      search: {
        type: Object,
        required: true
      }
    },

    data() {
      return {
        statusList: this.i18n.getDropDown('orderMgr.status', [2, 3])
      };
    }
  };

</script>

<style lang="scss" scoped>
  @import '~viewStyle/searchForm';

  .search-form {
    .time-input {
      width: 200px;
    }

    .search-input {
      width: 175px;
    }
  }

</style>
